<template>
  <div class="artistlist">
    <div class="artist">
      <div class="w1200">
        <div class="artist-type">
          <ul>
            <li
              class="type-main"
              :class="index === initialIndex ? 'active' : ''"
              v-for="(item, index) in initialList"
              :key="item.label"
              @click="selectType(index, 'initial')"
            >
              {{ item.label }}
            </li>
          </ul>
          <ul>
            <li
              class="type-main"
              :class="index === areaIndex ? 'active' : ''"
              v-for="(item, index) in areaList"
              :key="item.label"
              @click="selectType(index, 'area')"
            >
              {{ item.label }}
            </li>
          </ul>
          <ul>
            <li
              class="type-main"
              :class="index === typeIndex ? 'active' : ''"
              v-for="(item, index) in typeList"
              :key="item.label"
              @click="selectType(index, 'type')"
            >
              {{ item.label }}
            </li>
          </ul>
        </div>
        <div class="artist-main">
          <singer-list class="singer" :hotSingerList="singerList"></singer-list>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import SingerList from "@/components/common/Hot-singer.vue";
export default {
  components: {
    SingerList,
  },
  data() {
    return {
      singer_params: {
        area: "",
        type: "",
        initial: "",
        limit: "30",
        offset: 0,
      },
      singerList: [],
      initialList: [
        { label: "热门", val: -1 },
        { label: "#", val: 0 },
      ],
      typeList: [
        { label: "全部", val: -1 },
        { label: "男歌手", val: 1 },
        { label: "女歌手", val: 2 },
        { label: "乐队", val: 3 },
      ],
      areaList: [
        { label: "全部", val: -1 },
        { label: "华语", val: 7 },
        { label: "欧美", val: 96 },
        { label: "日本", val: 8 },
        { label: "韩国", val: 16 },
        { label: "其他", val: 0 },
      ],
      initialIndex: 0,
      areaIndex: 0,
      typeIndex: 0,
    };
  },
  created() {
    this.renderInitial();
    this.getsingerType(this.singer_params);
  },
  computed: {},
  watch:{
       singer_params:{
          deep:true,
		    handler(newVal){
                // if(this.newMvList.length>60){
                //     return
                // }
			    this.getsingerType(newVal);
		}
      }
  },
  methods: {
    async getsingerType(params) {
      const res = await this.$api.getsingerType(params);
      this.singerList = res.artists;
      console.log(res);
    },
    renderInitial() {
      const apple = [];
      for (let i = 0; i < 26; i++) {
        apple.push({
          label: String.fromCharCode(65 + i),
          val: String.fromCharCode(97 + i),
        });
      }
      this.initialList = [this.initialList[0], ...apple, this.initialList[1]];
    },
    selectType(index, type) {
      this[type + "Index"] = index;
      this.singer_params[type]=this[type+'List'][index].val;
    },
  },
};
</script>
<style lang="less" scoped>
 .singer{
      /deep/.hot-singer {
        flex-wrap: wrap;
       li{
           margin: 30px;
       }
      }
    }
.artist {
  width: 100%;
  .w1200 {
    width: 1200px;
    margin: 0 auto;
    .artist-type {
      width: 100%;
      min-height: 210px;
      padding: 20px 0;
      ul:nth-child(2) {
        li {
          width: 52px;
        }
      }
      ul:nth-child(3) {
        li {
          width: 62px;
        }
      }
      ul {
        width: 100%;
        height: 50px;
        padding-bottom: 20px;
        margin-left: 10px;
        display: flex;
        li {
          width: 34px;
          height: 30px;
          padding: 0 6px;
          text-align: center;
          line-height: 30px;
          margin-right: 6px;
          color: #333;
          border-radius: 4px;
          cursor: pointer;
        }
        li:nth-child(1) {
          width: 54px;
        }
        .active {
          background-color: #ff641e;
          color: #fff;
        }
      }
    }
  }
}
</style>
